<template>
  <div>
    <!-- 选择类型 -->
    <!-- <div class="top">
      <yd-flexbox>
        <yd-flexbox-item class="text-center">
          <div v-if="show2 == true" style="text-align:center" @click="del">
            <hd-svg-icon name="hd-yduishanchu" slot="left" size="20px" color="#000"></hd-svg-icon>
          </div>
        </yd-flexbox-item>
        <yd-flexbox-item class="text-center" @click.native="show1 = true">
          <span>{{title}}</span>
          <span>
            <hd-svg-icon name="hd-arrow" slot="left" size="20px" color="#000"></hd-svg-icon>
          </span>            
        </yd-flexbox-item>
        <yd-flexbox-item class="text-right" @click.native="show2 = !show2">
          <span class="edit">编辑</span>
        </yd-flexbox-item>
      </yd-flexbox>
    </div> -->
    <!-- 选择状态 -->
    <yd-tab :callback='load'>
        <yd-tab-panel label="审核中" tabkey="0" active></yd-tab-panel>
        <yd-tab-panel label="已通过" tabkey="1"></yd-tab-panel>
        <yd-tab-panel label="未通过" tabkey="2"></yd-tab-panel>
    </yd-tab>

    <div class="comment-body" v-for="item in list" :key="item.index" slot="list">   
      <div class="comment-user">
        <img :src="item.headimgurl" alt="" class="user-img">
              <!-- checkbox -->
        <div class="checkdiv" v-if="show2 == true">
          <yd-checkbox-group v-model="checkbox">
            <yd-checkbox :val="JSON.stringify(item)" shape="circle">&nbsp;</yd-checkbox>
          </yd-checkbox-group>
        </div>   
      </div>

      <div class="content">
        <div class="create-time">
          {{item.create_time1}}
        </div>
        <div class="username">{{item.nickname}}</div>
        
        <div class="score">
          <span style="float:left;margin-right:5px;">打分</span>
          <yd-rate v-model="item.score" size="12px"></yd-rate>
        </div>
        <div class="comment-content">
          {{item.content}}
        </div>
        <div class="comment-img">
          <img :src="item.image" alt="" class="user-comment-img">
        </div>
        <router-link :to="{path:item.path,query: {id:item.place_id}}">
        <div class="jump-content">
          <img :src="item.place_image" alt="" class="jump-img">
          <div class="jump-place-name">{{item.title}}</div>
        </div>
        </router-link>
      </div>
      <div>
        <div class="see">浏览{{item.see}}</div>
        <div class="thumbs-up" v-if="item.fabulous===0">
            <hd-svg-icon name="hd-xin2" size="16px" style="margin-top:3px;"></hd-svg-icon> &nbsp;
            <span>{{item.fabulous}}</span>
        </div>
        <div class="thumbs-up" v-if="item.fabulous!=0">
            <hd-svg-icon name="hd-xin-" size="16px" style="margin-top:3px;"></hd-svg-icon> &nbsp;
            <span>{{item.fabulous}}</span>
        </div>
      </div>
      <div class="line"></div>
    </div>


    <!-- 下方弹出框 -->
      <yd-popup v-model="show1" position="bottom" height="60%">
        <yd-flexbox>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" size="small" style="margin:10px;width:50%" @click.native = "load2()">全部</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" size="small" style="margin:10px;width:50%" @click.native = "load2('M','枫红·食')"> 枫红·食</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" size="small" style="margin:10px;width:50%" @click.native = "load2('H','郁金·住')"> 郁金·住</yd-button></yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('J','蔚蓝·游')"> 蔚蓝·游</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('T','竹绿·行')"> 竹绿·行</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('S','灵紫·购')"> 灵紫·购</yd-button></yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('L','精品线路')"> 精品线路</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('A','热门游记')"> 热门游记</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"></yd-flexbox-item>
        </yd-flexbox>
      </yd-popup>
  </div>
</template>
<script>
export default {
  name: 'myComment',
  data() {
    return {
      checkbox: [],
      delList: [],
      title: '全部评论',
      rate: 4,
      list: [],
      pageNo: 1,
      pageSize: 6,
      show1: false,
      show2: false,
      parameter: this.$route.query.parameter
    }
  },
  mounted: function() {
    this.load(this.parameter);
    this.title = this.$route.query.title;
    if (this.title === '' || this.title === undefined) {
      this.title = '全部评论'
    }
    console.log(this.$route.query);
    console.log('!@!@%#%')
  },
  methods: {
    load(value) {
      this.show1 = false;
      this.show2 = false;
      if (value === '审核中') {
        value = '0'
      }
      if (value === '已通过') {
        value = '1'
      }
      if (value === '未通过') {
        value = '2'
      }
      this.hdAjax({
        url: this.API.findMyCommentList,
        data: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          display_state: value,
          place_type: this.$route.query.parameter
        },
        success: (resultData) => {
          this.list = resultData.data.results;
          this.list.forEach(function(element) {
            if (element.place_type === 'M') {
              element['path'] = 'redinfo'
            }
            if (element.place_type === 'H') {
              element['path'] = 'liveinfo'
            }
            if (element.place_type === 'S') {
              element['path'] = 'buyinfo'
            }
            if (element.place_type === 'T') {
              element['path'] = 'rentComInfo'
            }
            if (element.place_type === 'J') {
              element['path'] = 'recomment_detail'
            }
            if (element.place_type === 'L') {
              element['path'] = 'boutiquelineinfo'
            }
            if (element.place_type === 'A') {
              element['path'] = 'travelnotesinfo'
            }
          }, this);
          this.list.forEach(element => {
            var createtime = new Date(
              element.create_time.replace(/-/g, '/')
            ).getTime();
            var second = 1000;
            var minute = second * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var week = day * 7;
            // var halfamonth = day * 15;
            var month = day * 30;
            var now = new Date().getTime();
            var diffValue = now - createtime;
            if (diffValue < 0) {
              return;
            }
            var secC = diffValue / second;
            var minC = diffValue / minute;
            var hourC = diffValue / hour;
            var dayC = diffValue / day;
            var weekC = diffValue / week;
            var monthC = diffValue / month;
            if (monthC >= 1) {
              this.result = ' ' + parseInt(monthC) + '月前';
            } else if (weekC >= 1) {
              this.result = ' ' + parseInt(weekC) + '周前';
            } else if (dayC >= 1) {
              this.result = ' ' + parseInt(dayC) + '天前';
            } else if (hourC >= 1) {
              this.result = ' ' + parseInt(hourC) + '小时前';
            } else if (minC >= 1) {
              this.result = ' ' + parseInt(minC) + '分钟前';
            } else if (secC >= 1) {
              this.result = ' ' + parseInt(secC) + '秒前';
            } else {
              this.result = '刚刚';
            }
            element['create_time1'] = this.result;
          });
        }
      });
    },
    load2(value, titles) {
      this.$router.push({path: 'myComment', query: {parameter: value, title: titles}});
      location.reload();
    },
    del() {
      this.$dialog.confirm({
        title: '删除',
        mes: '确定要删除已选中内容？！',
        opts: [
          {
            txt: '取消',
            color: false,
            callback: () => {
              return;
            }
          },
          {
            txt: '确定',
            color: 'true',
            callback: () => {
              console.log(this.checkbox);
              this.checkbox.forEach((item) => {
                console.log(JSON.parse(item).id);
                this.delList.push({id: JSON.parse(item).id});
              });
              console.log(this.delList);
              this.hdAjax({
                url: this.API.deleteMyComment,
                data: {
                  list: this.delList
                },
                method: 'post',
                success: (resultData) => {
                  // this.$dialog.toast({mes: '已删除', timeout: 1000});
                  // this.$router.push({path: 'myCollection', query: {canshu: this.canshu}});
                  location.reload();
                }
              });
            }
          }
        ]
      });
    }
  }
}
</script>
<style>
  body{
    background-color:#fff;
  }
</style>

<style scoped>
  .top{
    height:50px;
    width:100%;
    text-align:center; 
    line-height:50px;
    font-size:20px;
    background-color:white;
    border-bottom:1px solid #F0F0F0;
  }
  .text-center{
    text-align: center
  }
  .text-right{
    text-align: right
  }
  .edit{
    margin-right:10px;
    font-size:15px;
    color:blue
  }
  .comment-body{
    margin-bottom:10px;
    height: 410px;
    background-color:#ffffff;
    padding:10px;
    /* margin-bottom:10px; */
    /* height:200px; */
  }
  .comment-user{
    width:60px;
    /* height:60px; */
    float:left;
  }
  .user-img{
    width:60px;
    height:60px;
    border-radius: 30px;
  }
  .content{
    /* width:20%; */
    float:left;
    margin-left:10px;
    width:76%
  }
  .username{
    font-size:.3rem;
    margin-bottom:5px;
  }
  /* .score{
    float:left
  } */
  .create-time{
    float: right;
    color:grey;
  }
  .comment-content{
    width:85%;
    margin: 10px 10px 10px 0;
  }
  .user-comment-img{
    width:85%;
    height:200px;
  }
  .jump-content{
    width:100%;
    height:80px;
    background-color:	#F0F0F0;
    margin-top:10px;
    /* padding-bottom:10px;     */
    /* margin-bottom:10px; */
  }
  .jump-img{
    width:70px;
    height:70px;
    margin-top:5px;
    margin-left:5px;
    float:left;
    border-radius:5px;
  }
  .jump-place-name{
    font-size:.28rem;
    float:left;
    padding-top:10px;
    padding-left:10px;
    width: 60%;
    height: 100%;
  }
  /* .line{
    margin-top:10px;
    border-bottom: 10px solid 	#F0F0F0	;
  } */
  .thumbs-up{
    float:right;
    margin-top:5px;
    margin-right:20px;
    /* margin-bottom:20px; */
    width:60px;
    height:25px;
    border: 1px solid #bbbbbb;
    border-radius: 40px;
    text-align:center;
  }
  .see{
    float:left;
    margin-top:10px;
    margin-left:20%;
    font-size:.25rem;
    color:	#ADADAD;
  }
  .checkdiv{
  float:left;
  height:50%;
  line-height:60px;
  margin-left:0px
  }
</style>
